import { h } from 'vue';
import dayjs from 'dayjs';
import { Button, Tag } from 'ant-design-vue';
import TableImg from '/@/components/Table/src/components/TableImg.vue';
import { isArray, isString, isFunction, isEmpty, isNullOrUnDef } from '@/utils/is';
import Icon from '@/components/Icon/Icon.vue';
import { JsonPreview } from '@/components/CodeEditor';
import { EnumSchema } from '@/utils/common/types';

export const useAdRender = {
  /**
   * 渲染Base64图片
   * @param text 图片内容
   * @returns image标签
   */
  renderImgBase64: (text: string) => {
    if (text) {
      if (isArray(text))
        return h(TableImg, {
          size: 60,
          showBadge: true,
          simpleShow: true,
          imgList: text,
        });
      else if (isString(text))
        return h(TableImg, {
          size: 60,
          showBadge: false,
          simpleShow: true,
          imgList: [text],
        });
    }
  },
  /**
   * 渲染图片
   * @param text 图片地址
   * @returns image标签
   */
  renderImg: (text: string) => {
    if (text) {
      if (isArray(text))
        return h(TableImg, {
          size: 60,
          showBadge: true,
          simpleShow: true,
          imgList: text,
          srcPrefix: import.meta.env.VITE_GLOB_FILES_URL_PREFIX,
        });
      else if (isString(text))
        return h(TableImg, {
          size: 60,
          showBadge: false,
          simpleShow: true,
          imgList: [text],
          srcPrefix: import.meta.env.VITE_GLOB_FILES_URL_PREFIX,
        });
    }

    return text;
  },
  /**
   * 渲染链接
   * @param url 链接地址
   * @param text 文字说明
   * @returns link 按钮
   */
  renderLink: (url: string, text?: string) => {
    if (url) return h(Button, { type: 'link', href: url, target: '_blank' }, () => text || '');

    return '';
  },
  /**
   * 渲染文本，将text与val 拼接到一起
   * @param text 文本1
   * @param val 文本2
   * @returns 文本1 + 文本2
   */
  renderText: (text: string, val: string) => {
    if (text) return `${text} ${val}`;
    else return '';
  },
  /**
   * 渲染标签
   * @param text 标签文本
   * @param color 标签颜色
   * @returns 标签
   */
  renderTag: (text: string | number, color?: string) => {
    if (color) return h(Tag, { color }, () => text);
    else return h(Tag, {}, () => text);
  },
  /**
   * 渲染多标签
   * @param texts 文本
   * @returns 多标签
   */
  renderTags: (texts: string[]) => {
    if (texts) {
      return h('div', null, [
        texts.map((text) => {
          return h(Tag, null, () => text);
        }),
      ]);
    }
    return '';
  },
  /**
   * 渲染日期
   * @param text 日期
   * @param format 格式化
   * @returns 格式化后日期
   */
  renderDate: (text: string, format?: string) => {
    if (!text) return '';

    if (!format) return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
    else return dayjs(text).format(format);
  },
  /**
   * 渲染枚举列表
   * @param value 枚举值
   * @param EnumSchema[] 枚举数组
   * @returns 枚举文本标签
   */
  renderEnum: (value: any, enumSchemas: EnumSchema[]) => {
    const enumData = enumSchemas.find((a) => {
      return a.value === value;
    });
    if (!enumData) return value;
    if (!enumData.tag) return enumData.label;

    return h(
      Tag,
      {
        closable: false,
        color: enumData.tagColor,
        icon: enumData.tagIcon,
      },
      { default: () => enumData.label || enumData.value },
    );
  },
  /**
   * 渲染 下拉列表
   * @param value 值
   * @param datas[] 下拉数组
   * @returns 文本标签
   */
  renderSelect: (value: any, nodes: any[], valueField: string, labelField: string) => {
    if (isNullOrUnDef(nodes)) return value;

    const node = nodes.find((a) => {
      return Reflect.get(a, valueField) == value;
    });
    if (!node) return value;
    return Reflect.get(node, labelField);
  },
  /**
   * 渲染图标icon
   * @param text icon
   * @returns icon
   */
  renderIcon: (text: string) => {
    if (text) return h(Icon, { icon: text });
  },
  /**
   * 使用JsonPreview组件  方便预览JSON
   * @param json json字符串/obj
   * @returns 能转为json返回JsonPreview 否则返回自身
   */
  renderJsonPreview: (json: any) => {
    if (!json) return '';
    if (typeof json === 'object') return h(JsonPreview, { data: json });

    if (typeof json === 'string') {
      try {
        const data = JSON.parse(json);
        return h(JsonPreview, { data });
      } catch (e) {
        return json;
      }
    }
  },
};
